// Copyright (c) 2022, hzmes and contributors
// For license information, please see license.txt

frappe.ui.form.on('Vue Test', {
	refresh: function(frm) {
		var vm = new Vue({ 
            el: "#cat-facts", 
            data: {
                facts_loading: true,
                cat_facts: []
            }
        });
        frm.vm = vm;

		frappe.db.get_list('User', { fields: ["full_name", "name", "email"] })
		.then((r) => { vm.facts_loading = false; vm.cat_facts = r; })
	}
});

// <table id="cat-facts" class="table table-bordered">
// <caption style="caption-side: top;">Cat Facts</caption>
// <thead>
// 	<tr class="d-flex">
// 		<th class="col-3">ID</th>
// 		<th class="col-2">Date Created</th>
// 		<th class="col-7">Fact</th>
// 	</tr>
// </thead>
// <tbody>
// 	<tr v-if="facts_loading">
// 		<td style="text-align: center">
// 			<div class="spinner-border spinner-border-sm text-secondary" role="status">
// 				<span class="sr-only">Loading...</span>
// 			</div>
// 		</td>
// 	</tr>
// 	<tr v-cloak class="d-flex" v-for="(fact, index) in cat_facts">
// 		<td class="col-3">{{ fact.full_name}}</td>
// 		<td class="col-2">{{ fact.name }}</td>
// 		<td class="col-7">{{ fact.email}}</td>
// 	</tr>
// 	<tr v-cloak v-if="cat_facts.length === 0 && !facts_loading">
// 		<td style="font-style: italic">No data.</td>
// 	</tr>
// </tbody>
// </table>

// <div>@((MarkupString)TablesLocalizer["NormalDiv"].Value)</div>
// <Button Icon="fa-solid fa-arrows-rotate" Text="@RefreshText" OnClick="OnClick" class="my-2" />
// <Table TItem="Foo" Items="@Items.Take(3)">
//     <TableColumns>
//         <TableColumn @bind-Field="@context.DateTime" Width="180" />
//         <TableColumn @bind-Field="@context.Name" />
//         <TableColumn @bind-Field="@context.Address" />
//     </TableColumns>
// </Table>

